<template>
    <div class="edit">
        <!-- 主体 -->
        <div class="main">
            <div class="doctor">
                <!-- 医院 -->
                <span>{{ selectExpert.hospitalname }}</span>
                <!-- 科室 -->
                <span>{{ selectExpert.deptName }}</span>
                <!-- 医生姓名 -->
                <span>{{ selectExpert.name }}</span>
            </div>
            <!-- 远程门诊类型 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">*&nbsp;</span>
                    <p>远程门诊类型</p>
                </div>
                <Select class="w-select" @on-change="changeSearchType" v-model="searchType">
                    <Option
                        v-for="item,index in searchTypeList"
                        :value="item.id"
                        :key="item.id"
                        style='text-align:center;'
                    >{{item.name}}</Option>
                </Select>
            </div>
            <!-- 医事服务费 -->
            <div class="item">
                <div class="item-text">
                    <span style="margin-left:6px">&nbsp; </span>
                    <p>医事服务费</p>
                </div>
                <p>{{ money }}元</p>
            </div>
            <!--  预约周期 -->
            <div class="item">
                <div class="item-text">
                    <span style="color:red;">*&nbsp;</span>
                    <p>预约周期</p>
                </div>
                <Select class="w-select" v-model="cycle">
                    <Option v-for="item in cycleList" :value="item.id" :key="item.id" style='text-align:center;'>{{item.name}}</Option>
                </Select>
            </div>
            <div class="item">
                <div class="item-text">
                    <span style="margin-left:6px">&nbsp; </span>
                    <p>排班模式</p>
                </div>
                <Button type="primary" @click="jump">分时段设置</Button>
                <p style="margin-left:20px;color:#ff9966;">（当前为“普通设置”，点击可切换排班模式）</p>
            </div>
            <!-- 列表 -->
            <div class="table">
                <p>远程门诊接诊数量</p>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td>时间</td>
                        <td>预约时间段</td>
                        <td>星期一</td>
                        <td>星期二</td>
                        <td>星期三</td>
                        <td>星期四</td>
                        <td>星期五</td>
                        <td>星期六</td>
                        <td>星期天</td>
                    </tr>
                    <tr>
                        <td>上午</td>
                        <td>
                            <TimePicker
                                :value="value2"
                                format="HH:mm"
                                type="timerange"
                                placement="bottom-end"
                                placeholder="时间段"
                                style="width: 120px"
                                :editable="false"
                                :disabled="true"
                                :open="false"
                            >
                                <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template>{{ value2[0] + '-' + value2[1] }}</template>
                                </a>
                            </TimePicker>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd11"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd21"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd31"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd41"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd51"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd61"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="topLength" :min="0" v-model="wd71"></InputNumber>
                        </td>
                    </tr>
                    <tr>
                        <td>下午</td>
                        <td>
                            <TimePicker
                                :value="value3"
                                format="HH:mm"
                                type="timerange"
                                placement="bottom-end"
                                placeholder="时间段"
                                style="width: 120px"
                               :editable="false"
                                :disabled="true"
                                :open="false"
                            >
                                <a href="javascript:void(0)">
                                    <Icon type="ios-clock-outline"></Icon>
                                    <template>{{ value3[0] + '-' + value3[1] }}</template>
                                </a>
                            </TimePicker>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd12"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd22"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd32"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd42"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd52"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd62"></InputNumber>
                        </td>
                        <td>
                            <InputNumber :max="botLength" :min="0" v-model="wd72"></InputNumber>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- 预约备注 -->
            <div class="item">
                <div class="item-text">
                    <span style="margin-left:6px">&nbsp; </span>
                    <span>预约备注</span>
                </div>
                <Input v-model.trim="text_info" type="textarea" maxlength="80" :rows="4" placeholder="请输入备注"/>
            </div>
            <!-- 保存 -->
            <div class="save">
                <Button type="primary" @click="save">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />保存
                </Button>
                <Button @click="back">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </div>
        </div>
    </div>
</template>
<script>
import tempHeader from "@/components/tmpHeader";
import { TimePicker } from "view-design";
import api from "@/api/commonApi";
export default {
    components: {
        tempHeader,
        TimePicker
    },
    data() {
        return {
            // 门诊类型
            searchType: -1,
            searchTypeList: [],
            money: 0,
            topLength: 8,
            botLength: 8,
            //   预约周期
            cycle: 7,
            cycleList: [
                // { id: 1, name: "一天" },
                // { id: 2, name: "二天" },
                // { id: 3, name: "三天" },
                // { id: 4, name: "四天" },
                // { id: 5, name: "五天" },
                // { id: 6, name: "六天" },
                { id: 7, name: "七天" },
                { id: 8, name: "八天" },
                { id: 9, name: "九天" },
                { id: 10, name: "十天" },
                { id: 11, name: "十一天" },
                { id: 12, name: "十二天" },
                { id: 13, name: "十三天" },
                { id: 14, name: "十四天" },
                { id: 15, name: "十五天" }
            ],
            switch1: true,
            text_info: "",
            // 添加专家model
            modal1: false,
            expertNo: 1,
            expertSize: 10,
            // 上午时间
            value2: ["08:00", "12:00"],
            // 下午时间
            value3: ["13:00", "17:00"],
            // 一周号源
            // 周一
            wd11: 8,
            wd12: 8,
            // 周二
            wd21: 8,
            wd22: 8,
            // 周三
            wd31: 8,
            wd32: 8,
            // 周四
            wd41: 8,
            wd42: 8,
            // 周五
            wd51: 8,
            wd52: 8,
            // 周六
            wd61: 8,
            wd62: 8,
            // 周天
            wd71: 8,
            wd72: 8,
            // 医院ID
            id: "",
            selectExpert: {},
            expertList: [],

            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 2,
        };
    },
    created() {     
        let query = this.$route.query;
        this.province = this.$route.query.province?parseInt(this.$route.query.province):null;
        this.city = this.$route.query.city?parseInt(this.$route.query.city):null;
        this.area = this.$route.query.area?parseInt(this.$route.query.area):null;
        this.hospital = this.$route.query.hospital?this.$route.query.hospital:null;
        this.selectExpert.hospitalname = query.hospitalname ? query.hospitalname : null;
        this.selectExpert.hospitalid = query.hospitalid ? parseInt(query.hospitalid) : null;
        this.selectExpert.deptName = query.deptName ? query.deptName : null;
        this.selectExpert.deptType = query.deptType ? query.deptType : null;
        this.selectExpert.name = query.name ? query.name : null;
        this.selectExpert.doctorId = query.doctorId ? parseInt(query.doctorId) : null;
        this.selectExpert.title = query.title ? query.title : null;
        this.selectExpert.titleName = query.titleName ? query.titleName : null;
        this.searchType = query.searchType
        ? query.searchType
        : "普通门诊";
        this.money = query.money ? parseInt(query.money) : 0;
        this.cycle = query.cycle ? parseInt(query.cycle) : 1;
        this.text_info = query.text_info ? query.text_info : null;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/remoteclinic/list",
                title: "远程门诊"
            }
        ];
        this.$emit("changeBreadList", breadList);
        this.getDetail(this.$route.query.id);
    },
    mounted() {},
    methods: {
        //  取消,后退 上一次
        back() {
            let pageNo = this.$route.query.pageNo;
            // function全局方法
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/remoteclinic/list",
                {
                    pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack:2,
                }
            );
        },
        // 根据远程门诊类型变更金额
        changeSearchType(val) {
            this.searchTypeList.forEach(item => {
                if (item.id == val) {
                    this.money = item.cost;
                }
            });
        },
        // 保存
        save() {
            let params = {};
            // 号源
            let tmpRegistertimes = [];
            for (let i = 1; i <= 7; i++) {
                for (let j = 1; j <= 2; j++) {
                    let tmpObj = {};
                    if (j == 1) {
                        tmpObj.timeStart = this.value2[0];
                        tmpObj.timeEnd = this.value2[1];
                    } else if (j == 2) {
                        tmpObj.timeStart = this.value3[0];
                        tmpObj.timeEnd = this.value3[1];
                    }
                    if (this["wd" + i + j] != null && this["wd" + i + j] > 0) {
                        tmpObj.hyNum = this["wd" + i + j];
                        tmpObj.hyDay = j;
                        tmpObj.hyWeek = i;
                        tmpRegistertimes.push(tmpObj);
                    }
                }
            }
            console.log('排班详情',tmpRegistertimes)
            if (tmpRegistertimes.length <= 0) {
                this.$Message.error({
                content: "请至少有一个号源有号再保存，谢谢",
                duration: 5
                });
                return false;
            }
            // 远程门诊类型
            params.outpatintTypeId = this.searchType;
            // 门诊周期
            params.term = this.cycle;
            // 备注
            params.remarks = this.text_info;
            params.fee = this.money;
            params.deptName = this.selectExpert.deptName;
            params.deptType = this.selectExpert.deptType;
            // 医院ID
            params.hospitalId = this.selectExpert.hospitalid;
            params.hospitalName = this.selectExpert.hospitalname;
            params.doctorId = this.selectExpert.doctorId;
            params.doctorName = this.selectExpert.name;
            params.id = this.id;
            params.title = this.selectExpert.title;
            params.titleName = this.selectExpert.titleName;
            params.timesList = tmpRegistertimes;
            params.timeType = 1
            if (this.searchType == -1) {
                this.$Message.info("请选择远程门诊类型");
            } else if (this.cycle < 0) {
                this.$Message.info("请选择远程门诊周期");
            } else {
                this.$axios
                    .post(api.updateRemoteDoctorMaster, params)
                    .then(res => {
                        let pageNo = this.$route.query.pageNo;
                        if (res.data.code) {
                            let info =
                                res.data.success;
                            this.$Message.info('修改'+info);
                            setTimeout(() => {
                                // function全局方法
                                this.functionJS.queryNavgationTo(
                                    this,
                                    "/index/doctorOperation/remoteclinic/list",
                                    {
                                        pageNo,
                                        province: this.province,
                                        city: this.city,
                                        area: this.area,
                                        hospital: this.hospital,
                                        isBack:2,
                                    }
                                );
                            }, 800);
                        } else {
                            let info =
                                res.data.message;
                            this.$Message.info(info);
                        }
                    });
            }
        },
        // 选择专家
        expert(item) {
            this.modal1 = false;
            this.selectExpert = item;
        },
        // 远程门诊类型
        getRemoteClinic(hospitalId) {
            this.$axios
                .post(api.findRemoteOutpatientTypeList, {
                    hospitalId
                })
                .then(res => {
                    if (res.data.code) {
                        let ret = res.data.object;
                        this.searchTypeList = ret;
                        this.searchTypeList.forEach(item => {
                            if (item.id == id) {
                                this.money = item.cost;
                            }
                        });
                    }
                });
        },
        getDetail(id) {
            this.$axios.post(api.findRemoteDoctorMasterById, { id }).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                     // 号源
                    for (let i = 0; i < ret.timesList.length; i++) {
                        let tmpregistertimes = ret.timesList[i];
                        this["wd" + tmpregistertimes.hyWeek + tmpregistertimes.hyDay] 
                        tmpregistertimes.hyNum;
                    }
                    // 远程门诊类型
                    this.searchType = ret.outpatintTypeId;
                    // 门诊周期
                    this.cycle = ret.term;
                    // 备注
                    this.text_info = ret.remarks;
                    this.money = ret.fee;
                    // 科室
                    this.selectExpert.name = ret.doctorName;
                    this.selectExpert.doctorId = ret.doctorId;
                    // 医院名字
                    this.selectExpert.hospitalname = ret.hospitalName;
                     // 医院id
                    this.selectExpert.hospitalid = ret.hospitalId;
                    // 医生姓名
                    this.selectExpert.deptName = ret.deptName;
                    this.selectExpert.deptType = ret.deptType;
                    // 获取远程门诊类型
                    this.getRemoteClinic(ret.hospitalId);                  
                    // 医生id
                    this.id = ret.id;  
                }
            });
        },
        // 跳转到分时段设置
        jump() {
            this.functionJS.queryNavgationTo(
                this,
                "/index/doctorOperation/remoteclinic/timesedit",
                {
                    id: this.id,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2,
                    deptType: this.selectExpert.deptType,
                    hospitalname: this.selectExpert.hospitalname,
                    hospitalid: this.selectExpert.hospitalid,
                    deptName: this.selectExpert.deptName,
                    name: this.selectExpert.name,
                    doctorId: this.selectExpert.doctorId,
                    title: this.selectExpert.title,
                    titleName: this.selectExpert.titleName,
                    searchType: this.searchType,
                    money: this.money,
                    cycle: this.cycle,
                    text_info: this.text_info,
                }
            );
        }
    }
};
</script>
<style lang="less" scoped>
.edit {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    background: #fff;
    .main {
        width: 80%;
        margin: 15px auto;
        .doctor {
            width: 100%;
            display: flex;
            height: 40px;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            span {
                margin-right: 20px;
                font-size: 20px;
            }
        }
        .item {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin: 10px 0;
            .item-text {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 130px;
            }
            .w-select {
                width: 150px;
            }
        }
        .table {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin: 10px 0;
            p {
                text-align: center;
                margin: 10px 0;
            }
            table {
                width: 100%;
                border: 1px solid #ddd;
                tr:first-child{
                    background: #f8f8f9;
                }
                tr:not(:first-child):hover {
                    background: #ebf7ff;
                }
                tr {
                    border-top: 1px solid #ddd;
                    height: 40px;
                    td {
                        text-align: center;
                    }
                    td.none {
                        display: none;
                    }
                }
            }
            .nodata {
                width: calc(100% - 1px);
                line-height: 40px;
                background: #fff;
                border: 1px solid #ddd;
                border-top: none;
                text-align: center;
            }
        }
        .text {
            width: 100%;
            display: flex;
            flex-direction: row;
            span {
                display: inline-block;
                width: 100px;
            }
        }
        .save {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 200px;
            margin: 10px auto;
            justify-content: space-around;
        }
    }
}
.modelExpert {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .total {
        text-align: center;
        margin: 10px 0;
    }
    .modelExpert_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        cursor: pointer;
        span {
            user-select: none;
        }
    }
    input {
        width: 100%;
        background: #fff;
        border: none;
        outline: none;
        text-indent: 10px;
        line-height: 30px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
    }
}
</style>

